<template>
	<view class="goods-detail">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in imgUrl" :key="index">
				<view class="swiper-item">
					<image class="img" :src="item.src" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<template v-if="goodsInfo.length>0">
			<view class="title">
				<view class="price">
					<text class="cprice">￥{{goodsInfo[0].sell_price}}</text>
					<text class="oprice">￥{{goodsInfo[0].market_price}}</text>
				</view>
				<text style="font-size: 34rpx;">{{goodsInfo[0].title}}</text>
			</view>
			<view v-if="goodsInfo[0]" class="sku">
				<text class="sku1"> 货号：{{goodsInfo[0].goods_no}}</text>
				<text> 库存：{{goodsInfo[0].stock_quantity}}</text>

			</view>
			<text class="detail">详情介绍</text>


		</template>
		<template v-if="detailDesc">
			<view id="detailDesc">
				<rich-text :nodes="detailDesc.content"></rich-text>
			</view>
		</template>
		<CartSheet></CartSheet>
	</view>
</template>

<script>
	import CartSheet from '../../components/GoodsDetail/CartSheet.vue';
	export default {
		components: {
			CartSheet
		},
		data() {
			return {
				imgUrl: [],
				goodsInfo: [],
				detailDesc: {}
			};
		},
		onLoad(e) {

			this.getImgData(e.id)
			this.getGoodsInfo(e.id)
			this.getDetailDesc(e.id)
		},
		methods: {
			async getImgData(id) {
				this.imgUrl = await this.$myRequest({
					url: '/api/getthumimages/' + id
				})

			},
			async getGoodsInfo(id) {
				this.goodsInfo = await this.$myRequest({
					url: '/api/goods/getinfo/' + id
				})

			},
			async getDetailDesc(id) {
				const res = await this.$myRequest({
					url: "/api/goods/getdesc/" + id
				})
				this.detailDesc = res[0]
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods-detail {
		width: 750rpx;

		.swiper {
			width: 100%;
			height: 714rpx;

			.img {
				width: 750rpx;
				height: 714rpx;

				div {
					width: 750rpx;
				}
			}
		}

		.title {
			width: 100%;
			padding: 20rpx 0 26rpx 20rpx;
			border-bottom: 9rpx solid #eeeeee;

			.price {
				margin-bottom: 20rpx;

				.cprice {
					color: #c41d01;
					font-size: 38rpx;

				}

				.oprice {
					font-size: 30rpx;
					color: #cccccc;
					text-decoration: line-through;
					padding-left: 20rpx;
					display: inline-block;

				}


			}
		}

		.sku {

			padding: 14rpx 0 16rpx 20rpx;
			display: flex;
			flex-direction: column;
			font-size: 34rpx;
			border-bottom: 9rpx solid #eeeeee;

			.sku1 {
				display: inline-block;
				margin-bottom: 20rpx;
			}
		}

		.detail {
			font-size: 34rpx;
			width: 750rpx;
			display: inline-block;
			padding: 10rpx 0 14rpx 20rpx;
			border-bottom: 2rpx solid #eeeeee;

		}

		.desc {
			padding: 20rpx 10rpx 5rpx 16rpx;
			display: inline-block;
			font-size: 30rpx;
		}

		.image {
			width: 100%;
		}

		#detailDesc {
			width: 750rpx !important;

			line-height: 50rpx;
			padding-bottom: 100rpx;
		}
	}
</style>